<template>
    <div class="goodsbox">
        <div class="goodsList">
                <div class="item" @click="food">
                    <p class="typelist-title">美食推荐</p>
                    <p class="typelist-desc">这里有好美食</p>
                    <img src="../../../assets/styles/picture/tubiao2.png" class="typelist-img">
                </div>
                <div class="item" @click="travel">
                    <p class="typelist-title">景点推荐</p>
                    <p class="typelist-desc">这里有好景点</p>
                    <img src="../../../assets/styles/picture/tubiao1.jpg" class="typelist-img">
                </div>
                <div class="item" @click="wear">
                    <p class="typelist-title">穿搭推荐</p>
                    <p class="typelist-desc">这里有好穿搭</p>
                    <img src="../../../assets/styles/picture/tubiao3.png" class="typelist-img">
                </div>
<!--                <div class="item">-->
<!--                    <p class="typelist-title">闲鱼精选</p>-->
<!--                    <p class="typelist-desc">这里有好东西</p>-->
<!--                    <img src="https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png" class="typelist-img">-->
<!--                </div>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeLike",
        methods: {
            food () {
                if (this.$store.state.login==true) {
                this.$router.push('/food')
            }else {
                alert('亲爱的趣粉,您还没有登录哦')
    }
            },
            travel () {
                if (this.$store.state.login==true) {
              this.$router.push('/travel')
            }else {
                alert('亲爱的趣粉,您还没有登录哦')
    }
            },
            wear () {
                if (this.$store.state.login==true) {
                    this.$router.push('/wear')
                }else {
                    alert('亲爱的趣粉,您还没有登录哦')
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
.icons >>> .swiper-container
    height 0
    padding-bottom 25%
.goodsbox
    padding-top 10px
    border-bottom 0 solid #f3f3f3
    .goodsList
        width 99%
    .item
        display inline-block
        list-style none
        text-decoration none
        width 24%
        padding-bottom 0
        margin-left 25px
        margin-top 0
        .typelist-title
            display: inline;
            font-size: 12px;
            padding: 0px 0.4rem;
            color: lightseagreen;
            font-weight: 400;
            height: 25px;
            width: 90px;
            margin-left: 1px;
            position: relative;
            bottom: 6px;
        .typelist-desc
            position: absolute;
            text-align: center;
            width: 90px;
            height: 0;
            color: #666;
            font-size: 11px;
            margin-bottom: 13px;
            margin-left: 5px;
            margin-top: -2px;
        .typelist-img
            width 1rem
            height 1rem
            margin-left: 20px;
            margin-top: 10px;
</style>
